<!-- 年龄确认弹框 非会员 -->
<template>
  <view>
    <modal :visible="visible" position="bottom">
      <view class="sdk-age-confirm-modal">
        <image
          @click="onCancel"
          src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"
          class="top-close"
          mode="widthFix"
        />
        <view class="title">欢迎来到麦卡伦线上精品店</view>
        <view class="content">
          <view class="checkbox-wrap">
            <view class="checkbox-all" @click.stop="onCheckAll">
              <view style="">
                <image
                  class="check-image"
                  v-if="checkedAll"
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/check.png"
                  mode=""
                ></image>
                <image
                  class="check-image"
                  v-else
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/uncheck.png"
                  mode=""
                ></image>
              </view>
              <view class="checkbox-text">我同意并确认勾选以下内容</view>
            </view>
            <view class="checkbox-item" @click.stop="onChangeAgeCheck">
              <view style="margin-top: 6rpx">
                <image
                  class="check-image"
                  v-if="ageCheck"
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/check.png"
                  mode=""
                ></image>
                <image
                  class="check-image"
                  v-else
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/uncheck.png"
                  mode=""
                ></image>
              </view>
              <view class="checkbox-text"
                >内容涉及酒类知识及其他相关信息，请确认您已满18周岁</view
              >
            </view>
            <view class="checkbox-item" @click.stop="onChangeClauseCheck">
              <view style="margin-top: 6rpx">
                <image
                  class="check-image"
                  v-if="clauseCheck"
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/check.png"
                  mode=""
                ></image>
                <image
                  class="check-image"
                  v-else
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/uncheck.png"
                  mode=""
                ></image>
              </view>
              <view class="checkbox-text"
                >我已阅读并同意<text class="font-nav" @click.stop="onLinkClick"
                  >《爱丁顿个人信息保护政策》</text
                >及
                <text class="font-nav" @click.stop="handleOpenPrivacyContract"
                  >《THE MACALLAN麦卡伦线上精品店小程序用户隐私保护政策》</text
                >
              </view>
            </view>
            <view class="checkbox-item" @click.stop="onSdkCheck">
              <view style="margin-top: 6rpx">
                <image
                  class="check-image"
                  v-if="sdkCheck"
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/check.png"
                  mode=""
                ></image>
                <image
                  class="check-image"
                  v-else
                  src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/uncheck.png"
                  mode=""
                ></image>
              </view>
              <view class="checkbox-text"
                >THE
                MACALLAN麦卡伦线上精品店小程序使用SDK工具和官方插件收集您的浏览行为数据进行分析，用以优化用户体验，为您提供更好的服务。如果您想了解这些SDK工具和第三方插件的具体细节，请查阅我们的<text
                  @click.stop="onLinkSDKClick"
                  class="font-nav"
                  data-identifier="privacy"
                  data-title="SDK和第三方插件清单"
                  >《SDK和第三方插件清单》</text
                >
              </view>
            </view>
          </view>
          <view class="btn-wrap">
            <button
              v-if="checkedAll"
              id="agree-btn"
              class="common-btn long-btn-width btn checkedAll-btn"
              open-type="agreePrivacyAuthorization"
              @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
            >
              同意并继续
            </button>
            <button
              v-else
              @click.stop="onConfirm"
              class="common-btn long-btn-width btn uncheckedAll-btn"
            >
              确定
            </button>
          </view>
        </view>
      </view>
    </modal>
    <custom-toast v-if="showMsg" :message="message"></custom-toast>
  </view>
</template>

<script>
import tip from "@/utils/tip";
import modal from "../modal/modal.vue";
import customToast from "./custom-toast.vue";
import { estImg } from "./static";
import { updatePolicyStatus, navigateToProtectionPolicy } from "./utils";
import RegisterTracker from "./RegisterTracker";
import { SYSTEM_INFO } from "@/utils/constant";
import { mapState } from "vuex";
export default {
  components: {
    modal,
    customToast,
  },
  props: {
    // 使用页面
    location: {
      type: String,
      default: "home",
    },
    // 有的话, 就判定为ts活动
    tsActId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: false,
      imgSrc: estImg,
      ageCheck: false, // 勾选年龄
      clauseCheck: false, // 勾选保护政策
      sdkCheck: false, //勾选sdk
      ysCheck: false, // 勾选微信隐私
      showClause: false, // 显示爱丁堡政策协议
      modalShowArr: [], // 三个协议的显示状态
      checkedRules: [false, false, false], // 协议的勾选状态
      marginTop: "10rpx",
      lowVersionWX: false,
      showMsg: false,
      message: "",
    };
  },
  computed: {
    ...mapState({
      ageModalChecked: (state) => state.ageModalChecked,
    }),
    checkedAll() {
      let flag = true;
      // this.modalShowArr.map((item, index) => {
      // 	if (item) {
      this.checkedRules.map((itey, indey) => {
        if (!itey) {
          flag = false;
        }
      });
      // 	}
      // })
      return flag;
    },
  },
  mounted() {
    this.lowVersionWX = !wx.getPrivacySetting;
  },
  methods: {
    open(showClause, showPrivate) {
      this.visible = true;
      if (!showPrivate && !showClause) {
        this.showClause = false;
      } else {
        this.showClause = true;
      }
      this.modalShowArr = [this.clauseCheck, this.showClause, this.sdkCheck];
      this.$commonSensors.popupEvent("PopupExposure", {
        popup_type: "用户授权",
        popup_name: "18岁弹窗",
      });
    },
    close() {
      this.visible = false;
    },
    onCheckAll() {
      if (this.checkedAll) {
        this.ageCheck = false;
        this.clauseCheck = false;
        this.sdkCheck = false;
      } else {
        this.ageCheck = true;
        this.clauseCheck = true;
        this.sdkCheck = true;
      }
      this.$set(this.checkedRules, 0, this.ageCheck);
      this.$set(this.checkedRules, 1, this.clauseCheck);
      this.$set(this.checkedRules, 2, this.sdkCheck);
    },
    onChangeAgeCheck() {
      this.ageCheck = !this.ageCheck;
      this.$set(this.checkedRules, 0, this.ageCheck);
    },
    onChangeClauseCheck() {
      this.clauseCheck = !this.clauseCheck;
      this.$set(this.checkedRules, 1, this.clauseCheck);
    },

    // onLinkClick() {
    // 	navigateToProtectionPolicy();
    // },
    onSdkCheck() {
      this.sdkCheck = !this.sdkCheck;
      this.$set(this.checkedRules, 2, this.sdkCheck);
    },
    onCancel() {
      let trackParams = {
        c_age_answer: "拒绝",
      };
      RegisterTracker.authGate({
        trackParams,
        location: this.location,
        registerType: this.tsActId ? "TARGET_SALES" : "NORMAL",
      });
      this.$commonSensors.popupEvent("PopupClick", {
        popup_type: "用户授权",
        popup_name: "18岁弹窗",
        button_name: "关闭",
      });
      wx.exitMiniProgram({
        complete: (com) => {},
      });
    },
    async onConfirm() {
      const { ageCheck, clauseCheck, sdkCheck, location, tsActId } = this;

      // 显示几个协议
      let trueIndexArr = [];
      // this.checkedRules.map((item, index) => {
      // 	if (item) {
      // 		trueIndexArr.push(index)
      // 	}
      // })
      let noticeArr = [];
      this.checkedRules.map((item, index) => {
        if (!item) {
          noticeArr.push(index);
        }
      });
      if (noticeArr.length > 0 && noticeArr[0] == 0) {
        this.plainTextMessge(noticeArr[0]);
      } else if (noticeArr.length > 0) {
        this.plainTextMessge(99);
      }
    },
    commit() {
      updatePolicyStatus();
      this.close();
      this.$emit("confirm");
      this.$commonSensors.popupEvent("PopupClick", {
        popup_type: "用户授权",
        popup_name: "18岁弹窗",
        button_name: "提交",
      });
    },
    plainTextMessge(number) {
      let msg;
      if (number == 0) {
        msg = "请确认您已年满18周岁";
      } else if (number == 99) {
        msg = "请确认已勾选全部选项";
      }
      this.showMsg = true;
      this.message = msg;
      setTimeout(() => {
        this.showMsg = false;
      }, 3000);
    },
    handleAgreePrivacyAuthorization() {
      const { location, tsActId } = this;
      //这里是后面更改的
      let trackParams = {
        c_age_answer: "允许",
        c_pii_ppg_answer: "允许",
      };
      RegisterTracker.authGate({
        trackParams,
        location,
        registerType: tsActId ? "TARGET_SALES" : "NORMAL",
      });
      this.commit();
      this.$commonSensors.popupEvent("PopupClick", {
        popup_type: "用户授权",
        popup_name: "18岁弹窗",
        button_name: "提交",
      });

      // 专属注册 会员清缓存 跳注册页
      if (this.$store.state.registerPageIsActive) {
        uni.navigateTo({ 
          url: `/pages/customer/exclusiveRegister?&userClickState=unionization&isActive=1`,
        });
      }
    },
    onLinkSDKClick(e) {
      uni.navigateTo({
        url: "/pages/cms/page?identifier=cms/sdkList&type=sdk",
      });
    },
    // 打开隐私协议页面
    handleOpenPrivacyContract() {
      wx.openPrivacyContract({
        success: () => {}, // 打开成功
        fail: (err) => {}, // 打开失败
      });
    },
    onLinkClick(e) {
      uni.navigateTo({
        url: "/pages/utcms/utcms?uttype=protectionPolicy",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./common.scss";

.sdk-age-confirm-modal {
  width: 750rpx;
  height: 874rpx;
  background: #fff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  position: relative;
  padding: 0 48rpx;

  .top-img {
    display: block;
    width: 100%;
  }

  .title {
    text-align: left;
    padding-top: 54rpx;
    font-weight: 500;
    font-family: "NotoSansSC-Medium";
    font-size: 36rpx;
    color: #000000;
    line-height: 52rpx;
  }

  .top-close {
    position: absolute;
    right: 48rpx;
    top: 64rpx;
    width: 32rpx;
    height: 32rpx;
  }

  .img-icon {
    padding-top: 128rpx;
    padding-left: 236.12rpx;
    width: 182rpx;
    height: 57rpx;
  }

  .content {
    // padding-top: 32rpx;
    // padding-bottom: 56rpx;
    padding: 36rpx 0;
    color: #1a1a1a !important;
  }

  .content-info {
    line-height: 40rpx;
    font-family: "FrankNew-Regular", "NotoSansSC-Regular";
  }

  .checkbox-wrap {
    // margin-bottom: 16rpx;
    margin-bottom: 78rpx;
  }

  .checkbox-all {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .checkbox-text {
      margin-left: 24rpx;
      font-size: 28rpx;
      line-height: 48rpx;
      font-weight: 500;
      width: auto;
      color: #1a1a1a;
      font-family: "NotoSansSC-Medium";
      // font-family: 'NotoSansSC-Regular';
    }
  }

  .checkbox-item {
    display: flex;
    margin-bottom: 16rpx;
    margin-left: 58rpx;
    align-items: flex-start;

    .checkbox-text {
      margin-left: 26rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      font-weight: normal;
      // word-break: break-all;
      // width: 550rpx;
      width: 540rpx;
      color: #1a1a1a;
      // font-family: 'FrankNew-Regular'
      font-family: "FrankNew-Regular", "NotoSansSC-Regular";
    }
  }

  .long-btn-width {
    width: 654rpx !important;
  }

  .btn-wrap {
    // position: absolute;
    // left: 48rpx;
    // bottom: 64rpx;
    display: flex;
    box-sizing: border-box;
  }

  .uncheckedAll-btn {
    background-color: #c6c6c6;
    color: #757575;
    border: 0 !important;
  }

  .checkedAll-btn {
    background-color: #000;
    border: 0 !important;
  }

  .font-nav {
    color: #1a1a1a;
    font-weight: 500;
    // font-family: 'NotoSansSC-Regular'
    font-family: "FrankNew-Medium", "NotoSansSC-Medium" !important;
  }

  .check-image {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
